<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
	#wrapper{
		margin-left: 70px;
		width: 800px;
		margin-bottom: 270px;
		font-family: nanum;
		margin-top: 100px;
	}
	#purchaseDetail td, th{
		width: 150px;
	}
	#listDetail{
		overflow-y:scroll;
		height: 50px;
		background: white;
	}
	#markFont{
		font-size: 15pt; font-weight: bold; color:#870200;
	}
	#payHeader{
		background:#ADABAB; background:rgba(173,171,171,.2);padding-left: 20px; width:200px;
	}
	#payContent{
		padding-left: 30px; width:200px;
	}
	#payHeader, #payContet{
		height: 50px;
	}
	li{
		margin-bottom: 4px;
	}
</style>
<script type="text/javascript">


	var tempMileage = 0;

	function acceptMileage(){
		var fixedPrice = parseInt(document.getElementById('fixedPrice').value);
		var remainMileage = parseInt(document.getElementById('remainMileage').value,10);
		var useMileage = parseInt(document.getElementById('useMileage').value,10);
		
		if(useMileage > remainMileage){
			alert('잔여 마일리지보다 큰 금액을 입력할 수 없습니다.');
			document.getElementById('useMileage').value=0;
		} else if(useMileage%100 != 0){
			alert('마일리지는 100 원단위 이상으로 입력해야합니다.');
			document.getElementById('useMileage').value=0;
		} else if(useMileage < 0 ){
			alert('음수는 입력할 수 없습니다.');
			document.getElementById('useMileage').value=0;
		} else {
			
			/* 마일리지 사용 및 잔여 금액 변경 */
			newUseMileage = tempMileage + useMileage; // 이전꺼 + 이번꺼사용할거 누적
			newMileage = remainMileage - useMileage; // 남은거 - 이번에 사용할거
			document.getElementById('useMileage').value = newUseMileage;
			document.getElementById('realMileage').value = newUseMileage;
			document.getElementById('remainMileage').value = newMileage;
			tempMileage = newUseMileage; // 이전 꺼를 저장
			
			/* 최종 결제 금액 변경 */
			resultPrice = fixedPrice -newUseMileage;
			document.getElementById('resultPay').value = resultPrice;
			
		}
	}
	
	function setValue(){
		var fixedPrice = parseInt(document.getElementById('fixedPrice').value);
		var resultPrice = document.getElementById('resultPay').value;
		/* hidden 값 전송 */
		document.getElementById('totalPay').value = fixedPrice;
		document.getElementById('realPay').value = resultPrice;
	}
</script>
</head>
<body>
	<div id="wrapper">
		<!-- *********** 이전 페이지에서 선택한 상품 결제 예정 내역 *************** -->
		<table style="background:#ADABAB; background:rgba(173,171,171,.2); width: 800px;">
			<tr>
				<td rowspan="3" 
					style="padding-top: 20px; padding-bottom:20px; width: 400px; padding-left: 50px;">
					<span id="markFont">결제 예정 내역 </span>
					&nbsp;&nbsp;(총 ${size}건)
				</td>
				<td style="width: 400px; padding-top: 10px;">
					<table id="purchaseDetail" style="width: 400px; border: 2px solid white;
						   border-collapse: 0px; border-spacing: 0px;">
						<tr>
							<th style="border-right: 2px solid white;">상품명</th>
							<th>수량</th>
						</tr>
					</table>
					<div id="listDetail">
						<table id="purchaseDetail" style="width: 400px">
						<c:forEach var="i" begin="0" end="${size}" step="1">
							<tr style="text-align: center;">
								<td>${itemList[i].item_name}</td>
								<td>${purMenuList[i].pm_quantity}</td>
							</tr>
						</c:forEach>
						</table>
					</div>
				</td>
			</tr>
			<tr>
				<td style="font-size: 12pt; padding-top: 10px; 
					padding-right: 50px; text-align: right;">
					적립 금액
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${mileage}&nbsp;원
				</td>
			</tr>
			<tr>
				<td style="font-size: 12pt; padding-bottom: 10px; padding-top: 3px; 
					padding-right: 50px; text-align: right;">
					<span style=" font-weight: bold; color:#004000">
						결제 예정금액
					</span>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${resultPrice}&nbsp;원
					<input type="hidden" id="fixedPrice" value="${resultPrice}"> 
				</td>
			</tr>
		</table>
		<br><br><br>
		
		<div id="markFont" style="color:black; margin-bottom: 10px; padding-left: 20px;">
			주문자 정보
			<span style="margin-left: 315px;">결제 정보</span>
		</div>
		<table>
			<tr>
				<td width="400px;">
					<!-- ***********주문자 정보*************** -->
					<table style="width: 380px; border-bottom: 2px solid rgba(173,171,171,.2); 
								  border-top: 2px solid rgba(173,171,171,.2);">
						<tr>
							<td id="payHeader">성명</td>
							<td id="payContent">${member.name}</td>
						</tr>
						<tr>
							<td id="payHeader">이메일</td>
							<td id="payContent">${member.email}</td>
						</tr>
						<tr>
							<td id="payHeader">핸드폰번호</td>
							<td id="payContent">${member.phone}</td>
						</tr>
						<tr>
							<td id="payHeader">현재마일리지</td>
							<td id="payContent">${currentMileage}</td>
						</tr>
					</table>
				</td>
				<td width="400px;">
					<!-- ***********결제 정보*************** -->
					<table style="width: 380px; border-bottom: 2px solid rgba(173,171,171,.2); 
								  border-top: 2px solid rgba(173,171,171,.2);">
						<tr>
							<td id="payHeader">결제방법</td>
							<td id="payContent">무통장입금</td>
						</tr>
						<tr>
							<td id="payHeader">입금계좌</td>
							<td id="payContent">
								국민(123123-12-123456)<br>
								우리(1232124-123124124)
							</td>
						</tr>
						<tr height="110px">
							<td id="payHeader">마일리지 사용</td>
							<td id="payContent">
								<input type="text" id="useMileage" size="8" value="0" style="text-align: right;"><br>
									<span style="margin-left: 37px; cursor: pointer;" 
										  onclick="acceptMileage()">↓</span><br>
								<input type="text" id="remainMileage" size="8" disabled="disabled"
									   style="text-align: right;" value="${currentMileage}">
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<br>
		<!-- *********** 유의사항 *************** -->
		<table>
			<tr>
				<td width="400px;" colspan="2">
					<form action="updateForm.do" method="POST">
					<input type="hidden" name="email" value="${email}">
					<div style="margin-left: -20px">
						<ul style="list-style: none;">
							<li style="font-weight: bold; margin-bottom: 7px;">[유의사항]</li>
							<li>상품권이 주문자의 핸드폰으로 발송됩니다.</li>
							<li>반드시 핸드폰 번호의 일치 여부를 확인해주시기 바랍니다.</li>
							<li>핸드폰 번호가 변경된 경우, 
								<input type="submit" value="수정" style="font-family: nanum;"> 후 주문해주시기 바랍니다.</li>
							<li>입금자 성명은 반드시 주문자 성명과 일치해야 합니다.</li>
							<li>마일리지가 적용된 최종 결제금액을 확인하시기 바랍니다.</li>
						</ul>
					</div>
					</form>
				</td>
				<td width="400px;" colspan="2">
				</td>
			</tr>
			<tr>
				<td colspan="4">
					<br><br>
				</td>
			</tr>
			<tr>
				<td style="padding-left: 20px;">
					<span style="color:gray; font-size: 20pt; font-weight: bold;">최종 결제 금액</span>
				</td>
				<td style="font-size: 15pt;">
					<input type="text" id="resultPay" 
					 	   style="border:0; background-color:transparent; font-size: 20pt; text-align: center;" 
								  size="6" value="${resultPrice}" disabled="disabled">&nbsp;&nbsp; 원
				</td>
				<td style="text-align: right; vertical-align: middle;">
					<img src="images/giftcard/btn_cancel.gif" onclick="history.go(-2);" style="cursor: pointer;">
				</td>
				<td style="text-align: center;  vertical-align: middle;">
					<form action="purchasePro.do" method="POST" onsubmit="setValue()">
						<input type="hidden" name="realPay" id="realPay" value="0"> <!-- 실결제금액 -->
						<!-- 마일리지 + 최종결제금액 => 이거의 10%가 마일리지로 적립됨 (purchase db에 저장) -->
						<input type="hidden" name="totalPay" id="totalPay" value="0">
						<input type="hidden" name="realMileage"  id="realMileage" value="0">
						<input type="hidden" name="email" value="${member.email}"><!-- 사용자 이메일 -->
						<c:forEach var="i" begin="0" end="${size-1}" step="1">
							<input type="hidden" name="purMenuNum_${i}" value="${purMenuList[i].item_num}">
							<input type="hidden" name="purMenuQuantity_${i}" value="${purMenuList[i].pm_quantity}">
						</c:forEach>
						<input type="hidden" name="size" value="${size}">
						<input type="image" src="images/giftcard/btn_payment.gif">
					</form>
				</td>
			</tr> 
		</table>
	</div>
</body>
</html>